<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>
</h:head>
<h:body>

	<h:form id="form">
		<p:growl id="messages" showDetail="true" />

		<p:dataTable id="userList" value="#{userController.users}" var="user"
			editable="false" rowKey="#{user.name}" selectionMode="single"
			selection="#{userController.selectedUser}" style="width:1000px;">
			<f:facet name="header">
	            User List
	        </f:facet>

			<p:ajax event="rowEdit" listener="#{userController.onEditUser}"
				update=":form:messages" />

			<p:column headerText="User Name">
				<p:cellEditor>
					<f:facet name="output">
						<h:outputText value="#{user.name}" />
					</f:facet>
					<f:facet name="input">
						<p:inputText value="#{user.name}" style="width:100%" />
					</f:facet>
				</p:cellEditor>
			</p:column>

			<p:column headerText="Email">
				<p:cellEditor>
					<f:facet name="output">
						<h:outputText value="#{user.email}" />
					</f:facet>
					<f:facet name="input">
						<p:inputText value="#{user.email}" style="width:100%" />
					</f:facet>
				</p:cellEditor>
			</p:column>

			<p:column headerText="Sex">
				<p:cellEditor>
					<f:facet name="output">
						<h:outputText value="#{user.isMale}" />
					</f:facet>
					<f:facet name="input">
						<p:selectOneMenu value="#{user.isMale}" style="width:100%"
							converter="javax.faces.Boolean">
							<f:selectItem itemLabel="Male" itemValue="true" />
							<f:selectItem itemLabel="Female" itemValue="false" />
						</p:selectOneMenu>
					</f:facet>
				</p:cellEditor>
			</p:column>

			<p:column style="width:80px">
				<p:rowEditor />
				<p:commandButton type="button" icon="ui-icon-trash"
					style="width:25px;height:25px;" />
			</p:column>
		</p:dataTable>

		<p:toolbar style="width:1000px;">
			<p:toolbarGroup>
			
				<!-- <p:commandButton value="Add User In Dialog"
					onclick="addUserDlg.show()" /> -->
				<p:commandButton value="Add User In Table" />

				<p:separator />

				<p:commandButton value="Edit User In Dialog"
					update=":form:editUserPanel" oncomplete="editUserDlg.show()" />

				<p:commandButton id="viewButton" value="View" icon="ui-icon-search"
					update=":form:display" oncomplete="carDialog.show()" />

				<p:separator />

				<p:commandButton value="Delete User" />
			</p:toolbarGroup>
		</p:toolbar>
		<!-- 
		<p:dialog id="addUserDialog" widgetVar="addUserDlg" header="Add User"
			modal="true" width="450" height="250">
			<p:panelGrid columns="2">
				<h:outputLabel value="User Name: *" />
				<p:inputText id="username" required="true" value="#{newUser.name}" />

				<h:outputLabel value="Password: *" />
				<p:inputText id="password" required="true"
					value="#{newUser.password}" readonly="true" />

				<h:outputLabel value="Email: *" />
				<p:inputText id="email" required="true" value="#{newUser.email}" />

				<h:outputText value="Sex: *" />
				<p:selectOneRadio id="sexOptions" required="true"
					value="#{newUser.isMale}" converter="javax.faces.Boolean">
					<f:selectItem itemLabel="Male" itemValue="true" />
					<f:selectItem itemLabel="Female" itemValue="false" />
				</p:selectOneRadio>

				<f:facet name="footer">
					<p:commandButton value="Save" icon="ui-icon-check"
						action="#{userController.addUser}" update="userList" />
				</f:facet>
			</p:panelGrid>
		</p:dialog>
 -->
		<p:dialog id="editUserDialog" widgetVar="editUserDlg"
			header="Edit User" width="450" height="250">
			<p:panelGrid id="editUserPanel" columns="2">
				<h:outputLabel value="User Name: *" />
				<p:inputText required="true"
					value="#{userController.selectedUser.name}" />

				<h:outputLabel value="Password: *" />
				<p:inputText required="true"
					value="#{userController.selectedUser.password}" readonly="true" />

				<h:outputLabel value="Email: *" />
				<p:inputText required="true"
					value="#{userController.selectedUser.email}" />

				<h:outputText value="Sex: *" />
				<p:selectOneRadio required="true"
					value="#{userController.selectedUser.isMale}"
					converter="javax.faces.Boolean">
					<f:selectItem itemLabel="Male" itemValue="true" />
					<f:selectItem itemLabel="Female" itemValue="false" />
				</p:selectOneRadio>

				<f:facet name="footer">
					<p:commandButton value="Save" icon="ui-icon-check"
						action="#{userController.editUser}" update="userList" />
				</f:facet>
			</p:panelGrid>
		</p:dialog>

		<p:dialog id="dialog" header="Car Detail" widgetVar="carDialog"
			resizable="false" width="200" showEffect="clip" hideEffect="fold">

			<h:panelGrid id="display" columns="2" cellpadding="4">

				<h:outputText value="Name:" />
				<h:outputText value="#{userController.selectedUser.name}" />

				<h:outputText value="Email:" />
				<h:outputText value="#{userController.selectedUser.email}" />
			</h:panelGrid>
		</p:dialog>

	</h:form>

</h:body>
</html>